<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 张磊
 * @Date: 2020-11-13 13:52:11
 * @LastEditors: 张磊
 * @LastEditTime: 2020-11-13 23:09:40
 * @FilePath: \lht1802A\项目代码\rank_tree\src\views\Detail\Search.vue
-->
<template>
  <div class="search">
    <van-nav-bar
      title="搜索"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />
    <div class="inp">
      <van-search
        style="flex: 1"
        v-model="state.value"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="onSelect"
      />
      <van-button type="primary" size="small" @click="onSearch"
        >搜索</van-button
      >
    </div>
    <div class="con" v-show="!state.value">
      <h3>历史搜索</h3>
      <div class="list">
        <div v-for="(item, index) in historyData" :key="index" class="item" @click="runSearch(item)">
          {{ index + 1 }}
          {{ item.length > 6 ? item.slice(0, 5) + "..." : item }}
        </div>
      </div>
      <h3>热门搜索</h3>
      <div class="list">
        <div v-for="(item, index) in data" :key="index" class="item"  @click="runSearch(item)">
          {{ index + 1 }}
          {{ item.length > 6 ? item.slice(0, 5) + "..." : item }}
        </div>
      </div>
    </div>
    <div class="searchList" v-show="state.value">
      <div class="sortList">
        <h3>排行</h3>
        <div v-for="(item, index) in sortList" :key="index" class="item">
          <Item :item="item" />
        </div>
      </div>
      <div class="conList">
        <h3>内容</h3>
        <div v-for="(item, index) in conList" :key="index" class="vio_item">
          <Vudio :item="item" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { computed, defineComponent, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import Vudio from "../../components/Vudio";
import Item from "../../components/Item";
export default defineComponent({
  components: {
    Item,
    Vudio,
  },
  setup(propd, context) {
    const state = reactive({
      mid: "0",
      value: "",
    });
    let { mid } = state;
    let store = useStore();

    store.dispatch("classify/getSearchList", { mid });
    // 返回
    let Router = useRouter();
    //返回
    function onClickLeft() {
      Router.go(-1);
    }
    //搜索
    function onSearch() {
      // console.log(store);
      if (state.value) {
        store.dispatch("classify/addHistory", state.value);
        store.dispatch("classify/getClickSearchList", {
          mid,
          keyword: state.value,
        });
      }
    }
    // 模糊搜索
    function onSelect() {
      //  store.dispatch("classify/getChangeList", {
      //   keyword: state.value,
      // });
      console.log(123);

    }
    //记录搜索
    function runSearch(item){
      state.value=item
      store.dispatch("classify/getClickSearchList", {
          mid,
          keyword: item,
        });
    }
    return {
      data: computed(() => store.state.classify.searchData),
      sortList: computed(() => store.state.classify.sortList),
      conList: computed(() => store.state.classify.conList),
      historyData: computed(() => store.state.classify.historyData&&store.state.classify.historyData.slice(0, 6)),
      changeList: computed(() => store.state.classify.changeList),
      onClickLeft,
      onSearch,
      onSelect,
      state,
      runSearch
    };
  },
});
</script>
<style lang='scss'>
.search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  h3 {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    text-align: left;
    text-indent: 1rem;
    font-weight: 900;
  }
  .inp {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
  }
  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;

      text-align: left;
      padding: 0.5rem 1rem;
    }
  }
  .con,
  .searchList {
    flex: 1;
    overflow: auto;
  }

  .sortList {
    width: 100%;
   
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.2rem;
    .item {
      width: 25%;
      padding: 0.2rem;
    }
  }

  .conList {
    margin-top: 0.4rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .vio_item {
      width: 49%;
    }
  }
}
</style>